<template>
	<view class="article">
		<u-toast ref="uToast" />
		<view class="article-title">{{question.title}}</view>
		<uni-list :border="false">
			<uni-list-item thumbSize="lg" :thumb="question.avatar?question.avatar:avatar">
				<!-- 通过body插槽定义作者信息内容 -->
				<view slot="body" class="header-content">
					<view class="uni-title">{{question.user.nickname||'未知'}}</view>
				</view>
				<view slot="footer" class="footer">
					<view class="uni-note">更新于 <text>{{question._add_time|timeFrom}}</text>
					</view>
				</view>
			</uni-list-item>
		</uni-list>
		<view class="article-content">
			<u-read-more ref="uReadMore" :toggle="true" show-height="600">
				<u-parse :html="question.content" @load="parseLoaded" :tag-style="style"></u-parse>
			</u-read-more>
		</view>

		<view class="comment-list">
			<view class="box">
				<view class="selection">
					{{comments.length}}个回答
				</view>
				<view class="list-box">
					<view class="comment-item" v-for="(item,index) in comments" :key="item._id">
						<uni-list :border="false">
							<uni-list-item thumbSize="lg" :thumb="item.avatar?question.avatar:avatar">
								<!-- 通过body插槽定义作者信息内容 -->
								<view slot="body" class="header-content">
									<view class="uni-title">{{item.user.nickname||'未知'}}</view>
								</view>
								<view slot="footer" class="footer">
									<view class="uni-note"> <text>{{item._add_time|timeFrom}}</text>
									</view>
								</view>
							</uni-list-item>
						</uni-list>
						<view class="comment-text">
							<mp-html :content="item.content"></mp-html>
						</view>
						<view class="wait-confirm" @click="acceptAnswer(item._id)"
							v-if="question.bbs_status!=2&&question.uid==userInfo._id&&item.comment_status!=2">
							采纳回答
						</view>
						<view class="has-confirm" v-if="item.comment_status==2">
							已采纳
						</view>
						<view class="del-comment" @click="delAnswer(item._id)"
							v-if="item.uid==userInfo._id&&item.comment_status!=2">
							删除
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="make-comment">
			<view class="box">
				<view class="selection">
					撰写答案
				</view>
				<u-alert-tips type="warning" :show-icon="true" :title="'请登陆后再发布回答'" v-if="!hasLogin"></u-alert-tips>
				<vk-data-input-editor ref="vk_editor" v-model="content" placeholder="请输入回答内容"></vk-data-input-editor>
				<view class="button-box">
					<u-button type="primary" :custom-style="btnCustomStyle" @click="submit">发布答案</u-button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	var that
	export default {
		data() {
			return {
				userInfo: getApp().globalData.userInfo,
				avatar: require('../../../../static/member/avatra.png'),
				question: {
					title: '',
					content: '',
					user: {
						name: "未知"
					}
				},
				content: "",
				style: {
					p: "text-indent: 0;"
				},
				hasLogin: uni.vk.callFunctionUtil.checkToken(),
				btnCustomStyle: {
					width: "670rpx",
					height: "80rpx",
					background: "#1663ff",
					borderRadius: "8rpx",
					letterSpacing: "2rpx"
				},
				comments: []
			};
		},
		onLoad(event) {
			that = this
			//获取真实新闻id，通常 id 来自上一个页面
			if (event.id) {
				this.id = event.id
			}
			this.loadComments()
		},
		onReady() {
			if (this.id) { // ID 不为空，则发起查询
				this.loadData()
			} else {
				uni.showToast({
					icon: 'none',
					title: '出错了，ID为空'
				})
			}
		},
		methods: {
			delAnswer(cid) {
				uni.showModal({
					title: "提示",
					content: "确认删除？",
					success(res) {
						if (res.confirm) {
							uni.vk.callFunction({
								url: 'client/bbs/kh/del_comment',
								data: {
									id: cid
								},
								success(data) {
									that.$refs.uToast.show({
										title: '删除成功！'
									})
									that.loadComments()
								},
								fail(e) {
									uni.vk.alert(e.msg)
								}
							});
						}
					}
				})

			},
			acceptAnswer(cid) {
				uni.showModal({
					title: "提示",
					content: "确认采纳？",
					success(res) {
						if (res.confirm) {
							uni.vk.callFunction({
								url: 'client/bbs/kh/accept_answer',
								data: {
									aid: that.id,
									cid: cid
								},
								success(data) {
									that.$refs.uToast.show({
										title: '采纳成功'
									})
									that.loadComments()
								},
								fail(e) {
									uni.vk.alert(e.msg)
								}
							});
						}
					}
				})

			},
			submit() {
				if (this.content.length < 2) {
					uni.showToast({
						icon: "none",
						title: "内容长度太短啦~"
					})
					return
				}

				uni.showModal({
					title: "提示",
					content: "确认提交？",
					success(res) {
						if (res.confirm) {
							uni.vk.callFunction({
								url: 'client/bbs/kh/add_comment',
								data: {
									aid: that.id,
									content: that.content
								},
								success(data) {
									that.content = ""
									that.$refs.vk_editor.clear()
									that.$refs.uToast.show({
										title: '提交成功'
									})
									that.loadComments()
								},
								fail(e) {
									uni.vk.alert(e.msg)
								}
							});
						}
					}
				})
			},
			loadComments() {
				uni.vk.callFunction({
					url: 'client/bbs/pub/comments',
					data: {
						aid: this.id
					},
					success(data) {
						that.comments = data.rows
						uni.hideLoading()
					},
					fail() {
						uni.hideLoading()
					}
				});
			},
			loadData() {
				uni.showLoading({
					title: "加载中..."
				})
				uni.vk.callFunction({
					url: 'client/bbs/pub/detail',
					data: {
						_id: this.id
					},
					success(data) {
						that.question = data.data.rows[0]
						uni.hideLoading()
					},
					fail() {
						uni.hideLoading()
					}
				});
			},
			parseLoaded() {
				this.$refs.uReadMore.init();
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background: rgb(244, 246, 248);
	}

	.header-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 14px;
	}

	/* 标题 */
	.uni-title {
		display: flex;
		/* margin-bottom: 5px; */
		font-size: 14px;
		font-weight: bold;
		color: #3b4144;
	}

	/* 描述 额外文本 */
	.uni-note {
		color: #999;
		font-size: 12px;

		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.footer {
		display: flex;
		align-items: center;
	}

	.article-title {
		padding: 20px 15px;
		padding-bottom: 0;
		font-weight: bold;
		font-size: 18px;
		background: #FFFFFF;
	}


	.article-content {
		background: #FFFFFF;
		padding: 15px;
		font-size: 15px;
		overflow: hidden;
	}

	.make-comment {
		padding: 20rpx;

		.box {
			background: #FFFFFF;

			.selection {
				font-weight: bold;
				color: #333333;
				font-size: 38rpx;
				padding: 20rpx;
			}
		}


	}

	.comment-list {
		padding: 20rpx;

		.box {
			background: #FFFFFF;

			.selection {
				font-weight: bold;
				color: #333333;
				font-size: 32rpx;
				padding: 20rpx;
			}

			.comment-item {
				border-top: 1px solid #efefef;
				padding-bottom: 20rpx;

				.comment-text {
					padding: 20rpx;

				}
			}

			.wait-confirm {
				display: inline-block;
				padding: 10rpx 20rpx;
				margin-left: 20rpx;
				border-radius: 5rpx;
				width: 160rpx;
				text-align: center;
				background-color: #f3f3f3;
				border-color: #f3f3f3;
				color: #7b7b7b;
			}

			.has-confirm {
				display: inline-block;
				padding: 10rpx 20rpx;
				margin-left: 20rpx;
				border-radius: 5rpx;
				width: 160rpx;
				text-align: center;
				color: #0084ff;
				background: rgba(0, 132, 255, 0.1);
				border-color: transparent;
			}

			.del-comment {
				display: inline-block;
				padding: 10rpx 20rpx;
				margin-left: 20rpx;
				border-radius: 5rpx;
				width: 160rpx;
				text-align: center;
				background-color: #fef0f0;
				color: #fa3534;
				border: 1px solid #fab6b6;
			}

		}


	}

	.button-box {
		padding: 20rpx;
	}
</style>
